<template>
  <router-link :to="href" >
  <div class="card-item">
    <div class="iconfont  card-img" :class="icon" :style="{background:background}"> </div>
    <div class="card-title">{{title}}</div>
    <div class="card-desc">{{desc}}
    </div>
  </div>

  </router-link>
</template>
<script>
export default {
  name: "Fenxi",
  props: {
    title: {
      type: String,
      default() {
        return "卡片标题";
      },
    },
    href:{
      type:Object,
      default(){
        return {

        }
      }
    },
    background:{
      type: String,
      default() {
        return "#DC4646";
      },
    },
    desc:{
      type: String,
      default() {
        return "以成立时间为主要维度";
      },
    },
    icon:{
      type: String,
      default() {
        return "icon-bianzu18";
      },
    }
  }
}
</script>

<style scoped>
.card-img {
  width: 60px;
  height: 60px;
  font-size: 35px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
/* background: #DC4646;*/
  border-radius: 12px;
}
.card-title{

  font-size: 21px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: #303133;
  line-height: 60px;
}
.card-desc{
  font-size: 12px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: #101010;
  width: 120px;
 text-align: center;
  line-height: 18px;
}
.card-item {
  width: 228px;

  height: 240px;
  padding-top: 36px;
  background: #FFFFFF;
 /* border: 1px solid #000000;*/
  /*  box-shadow: 0px 2px 5px 0px rgba(0, 118, 254, 0.35);*/
  border-radius: 8px;
  display: flex;
  margin-right: 12px;
  align-items: center;
  flex-direction: column;
}
.card-item:hover {
  box-shadow: 0px 2px 5px 0px rgba(0, 118, 254, 0.35);
  border: 1px solid rgba(0, 118, 254, 0.35);

}
</style>